<template>
  <div class="map-wrapper">
    <!-- <Loading v-if="isLoading" /> -->
    <div ref="container" class="map-container"></div>

    <AreaIndustrySelecter />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapGetters } from 'vuex'
import AreaIndustrySelecter from '@/components/index/industryMap/AreaIndustrySelecter.vue'
// import Loading from '@/components/Loading.vue'
import Map from '@/utils/map'
import geojsonCQ from '@/static/geojson/congqing.json'
import geojsonPark_ybq from '@/static/geojson/park_ybq.json'
import { MutationsType as MapMutations } from '@/actions/industryMap'
export default Vue.extend({
  components: { AreaIndustrySelecter },
  data() {
    return {
      isLoading: false,
      map: null,
      relMap: null,
      pointLayer: null,
      polygonLayer: null,
      parkLine: null,
      companyPoint: null,
    }
  },
  computed: {
    ...mapGetters('industryMap', ['areaCode', 'areaName']),
  },
  watch: {
    areaName(name) {
      this.fitAreaView(name)
      // this.drawParkPoint(name)
    },
  },
  async mounted() {
    if (!process.browser) return
    this.isLoading = true
    this.map = Map.getMap(Map.type.AMAP).getInstance({
      container: this.$refs.container,
      zoom: 7.5,
      center: [107.608607, 30.019549],
    })
    // Promise完成表示地图加载完成
    this.relMap = await this.map.getRelMapPromise()
    // 绘制数据
    this.drawCQPolygon()
    this.drawParkPoint()
    this.drawParkLine()
    this.drawCompanyPoint()
    this.isLoading = false

    this.relMap.on('zoomend', ({ target }) => {
      const zoom = target.getZoom()
      if (zoom < 9.5) {
        this.companyPoint.then((l) => l.hide())
        this.parkLine.then((l) => l.hide())
        this.pointLayer.then((l) => l.hide())
        this.$store.commit(MapMutations.SET_PARK_NAME, '')
      }
    })
  },

  beforeDestroy() {
    this.map?.destroy()
  },

  methods: {
    drawParkLine() {
      this.parkLine = this.map.renderParkLine(geojsonPark_ybq)
    },
    /**
     * 绘制重庆边界线
     * 点击可下钻
     */
    drawCQPolygon() {
      // console.log(geojsonCQ)

      const clickEvent = ({ areaName }) => {
        this.$store.commit(MapMutations.SET_AREA, { name: areaName, code: areaName })

        this.pointLayer.then((l) => l.show())
        // this.polygonLayer.then((l) => l.hide())
        // this.drawParkPoint()
      }

      this.polygonLayer = this.map.renderPolygon(geojsonCQ, {
        clickEvent,
      })
    },

    /**
     * 根据区县名称地图定位到区县位置
     */
    fitAreaView(name) {
      this.map.fitAreaView(name)
    },
    /**
     * 根据区县名称或id绘制当前区县的园区点
     */
    drawParkPoint() {
      const data = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {
              name: '重庆空港工业园区',
            },
            geometry: {
              type: 'Point',
              coordinates: [106.638258, 29.756216],
            },
          },
          {
            type: 'Feature',
            properties: {
              name: '重庆临空前沿科技城',
            },
            geometry: {
              type: 'Point',
              coordinates: [106.668653, 29.67431],
            },
          },
          {
            type: 'Feature',
            properties: {
              name: '重庆创新经济走廊建成区',
            },
            geometry: {
              type: 'Point',
              coordinates: [106.609774, 29.641237],
            },
          },
          {
            type: 'Feature',
            properties: {
              name: '重庆空港新城',
            },
            geometry: {
              type: 'Point',
              coordinates: [106.607823, 29.716317],
            },
          },
          {
            type: 'Feature',
            properties: {
              name: '仙桃国际大数据谷',
            },
            geometry: {
              type: 'Point',
              coordinates: [106.552415, 29.734693],
            },
          },
          {
            type: 'Feature',
            properties: {
              name: '重庆渝北国家农业科技园区',
            },
            geometry: {
              type: 'Point',
              coordinates: [106.705458, 29.873339],
            },
          },
        ],
      }
      const clickEvent = ({ parkName }) => {
        this.$store.commit(MapMutations.SET_PARK_NAME, parkName)

        this.fitAreaView(parkName)
        this.parkLine.then((l) => l.show())
        this.companyPoint.then((l) => l.show())
      }
      this.pointLayer = this.map.renderParkPoint(data, { clickEvent })
    },

    drawCompanyPoint() {
      const data = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {
              name: '重庆长安汽车股份有限公司',
            },
            geometry: {
              type: 'Point',
              coordinates: [106.636863, 29.746417],
            },
          },
          {
            type: 'Feature',
            properties: {
              name: '重庆恒伟林汽车零部件有限公司',
            },
            geometry: {
              type: 'Point',
              coordinates: [106.63755, 29.757855],
            },
          },
          {
            type: 'Feature',
            properties: {
              name: '重庆传音科技有限公司',
            },
            geometry: {
              type: 'Point',
              coordinates: [106.659073, 29.76753],
            },
          },
          {
            type: 'Feature',
            properties: {
              name: '重庆科勒发动机有限公司',
            },
            geometry: {
              type: 'Point',
              coordinates: [106.644949, 29.749974],
            },
          },
          {
            type: 'Feature',
            properties: {
              name: '重庆中南橡胶有限公司',
            },
            geometry: {
              type: 'Point',
              coordinates: [106.63829, 29.756153],
            },
          },
          {
            type: 'Feature',
            properties: {
              name: '重庆智得热工工业有限公司',
            },
            geometry: {
              type: 'Point',
              coordinates: [106.646524, 29.751405],
            },
          },
        ],
      }

      this.companyPoint = this.map.renderCompanyPoint(data)
    },
  },
})
</script>
<style lang="scss" scoped>
.map-wrapper {
  height: 100%;
  position: relative;
  .map-container {
    height: 100%;
  }

  ::v-deep.ant-spin {
    max-height: 100%;
  }

  ::v-deep.ant-spin-text {
    text-shadow: none !important;
  }
}
</style>
